import React from 'react'
import { Route, Link, Switch, Redirect, NavLink } from 'react-router-dom'
import Home from './components/Home'
import Detail from './components/Detail'
export default function App() {
  return (
    <div>
      App
      <br />
      <NavLink to="/home" className="active" activeClassName="select">
        home
      </NavLink>
      <NavLink to="/detail" className="active" activeClassName="select">
        detail
      </NavLink>
      <hr />
      {/* Switch组件的作用: 用来包裹Route.如果前面的Route匹配成功,后面的就不会再匹配 */}
      {/* <Switch>
        <Route path="/" component={Home}></Route>
        <Route path="/home" component={Home}></Route>
        <Route path="/detail" component={Detail}></Route>
      </Switch> */}
      {/* <Route path="/" component={Home}></Route> */}
      {/* Redirect组件: 不写from的时候,只要Redirect解析,就会直接重定向. 写了from之后,会根据是否有Switch有不同的效果:1. 如果有Switch包裹,不管form和to是什么,都会生效. 如果没有Switch包裹,from和to在写了非Route配置的路径是生效,否则不生效 */}
      {/* <Switch> */}
      <Redirect from="/" to="/home"></Redirect>
      <Route path="/home" component={Home}></Route>
      <Route path="/detail" component={Detail}></Route>
      {/* </Switch> */}
      <hr />
    </div>
  )
}
